<style>
    .example{

        height: 254px;
        width:350px;
        border-radius: 20px;
        padding: 0 10px 24px;
        margin-bottom: 30px;
        align-items: stretch;
        color: #fff;
        justify-content: space-between;
    }
    .example img{
        width: 47px;
        height: 47px;
    }
    .btn-infos{
        background: rgb(222, 240, 234);
        width: 98px;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        padding: 10px 30px;
    }
    .qingdong_config_btn{
        float: right;
    }
    .thumbnail .caption{
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 10px;
    }
    .qingdong_config_img{
        padding-top: 30px;
        text-align: center;

    }
    .qingdong_config_txt{
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
    }
    .qingdong_config_h{
        font-size: 22px;
        color: #fff;
    }
    .qingdong_config_img i{
        font-size: 50px;
        background: #fff;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        padding-top: 15px;
    }
    .qingdong_config_blue a{
        color: rgb(81, 188, 153) !important;
    }
    .qingdong_config_blue a:hover{
        color: rgb(81, 188, 153)  !important;
    }
    .qingdong_config_blue i{
        color: rgb(81, 188, 153);
    }
    .qingdong_config_blue_top{
        background: linear-gradient(rgb(186, 240, 221) 0%, rgb(81, 188, 153) 100%);
    }

    .qingdong_config_lan a{
        color: rgb(101, 99, 201) !important;
    }
    .qingdong_config_lan a:hover{
        color: rgb(101, 99, 201)  !important;
    }
    .qingdong_config_lan i{
        color: rgb(101, 99, 201);
    }
    .qingdong_config_lan_top{
        background: linear-gradient(rgb(193, 191, 255) 0%, rgb(101, 99, 201) 100%);
    }
    .qingdong_config_red a{
        color: rgb(229, 128, 109) !important;
    }
    .qingdong_config_red a:hover{
        color: rgb(229, 128, 109)  !important;
    }
    .qingdong_config_red i{
        color: rgb(229, 128, 109);
    }
    .qingdong_config_red_top{
        background: linear-gradient(rgb(250, 221, 192) 0%, rgb(229, 128, 109) 100%);
    }
    .qingdong_config_qlan a{
        color: rgb(103, 133, 205) !important;
    }
    .qingdong_config_qlan a:hover{
        color: rgb(103, 133, 205)  !important;
    }
    .qingdong_config_qlan i{
        color: rgb(103, 133, 205);
    }
    .qingdong_config_qlan_top{
        background: linear-gradient(rgb(190, 214, 255) 0%, rgb(103, 133, 205) 100%);
    }
    .col-sm-4,.col-md-3{
        width:auto !important;
        padding-left:10px !important;
    }
    .qingdong_config_qlans a{
        color: rgb(101, 99, 201) !important;
    }
    .qingdong_config_qlans a:hover{
        color: rgb(101, 99, 201)  !important;
    }
    .qingdong_config_qlans i{
        color: rgb(101, 99, 201);
    }
    .qingdong_config_qlans_top{
        background: linear-gradient(rgb(194, 192, 255) 0%, rgb(101, 99, 201) 100%)
    }

    .qingdong_config_yellow a{
        color: rgb(233, 168, 72) !important;
    }
    .qingdong_config_yellow a:hover{
        color: rgb(233, 168, 72)  !important;
    }
    .qingdong_config_yellow i{
        color: rgb(233, 168, 72);
    }
    .qingdong_config_yellow_top{
        background: linear-gradient(rgb(252, 230, 183) 0%, rgb(233, 168, 72) 100%)
    }

    .qingdong_config_201 a{
        color: rgb(143, 98, 201) !important;
    }
    .qingdong_config_201 a:hover{
        color: rgb(143, 98, 201)  !important;
    }
    .qingdong_config_201 i{
        color: rgb(143, 98, 201);
    }
    .qingdong_config_201_top{
        background: linear-gradient(rgb(213, 184, 250) 0%, rgb(143, 98, 201) 100%)
    }

    .qingdong_config_104 a{
        color: rgb(211, 96, 104) !important;
    }
    .qingdong_config_104 a:hover{
        color: rgb(211, 96, 104)  !important;
    }
    .qingdong_config_104 i{
        color: rgb(211, 96, 104);
    }
    .qingdong_config_104_top{
        background: linear-gradient(rgb(252, 183, 190) 0%, rgb(211, 96, 104) 100%)
    }

    .qingdong_config_191 a{
        color: rgb(21, 140, 191) !important;
    }
    .qingdong_config_191 a:hover{
        color: rgb(21, 140, 191)  !important;
    }
    .qingdong_config_191 i{
        color: rgb(21, 140, 191);
    }
    .qingdong_config_191_top{
        background: linear-gradient(rgb(165, 226, 252) 0%, rgb(21, 140, 191) 100%)
    }

    .qingdong_config_167 a{
        color: rgb(61, 160, 167) !important;
    }
    .qingdong_config_167 a:hover{
        color: rgb(61, 160, 167)  !important;
    }
    .qingdong_config_167 i{
        color: rgb(61, 160, 167);
    }
    .qingdong_config_167_top{
        background: linear-gradient(rgb(161, 243, 222) 0%, rgb(61, 160, 167) 100%)
    }

    .qingdong_config_190 a{
        color: rgb(60, 104, 190) !important;
    }
    .qingdong_config_190 a:hover{
        color: rgb(60, 104, 190)  !important;
    }
    .qingdong_config_190 i{
        color: rgb(60, 104, 190);
    }
    .qingdong_config_190_top{
        background: linear-gradient(rgb(132, 196, 255) 0%, rgb(60, 104, 190) 100%)
    }
</style>
<div class="panel-body row">
    <div class="panel panel-default panel-intro">

        <div class="panel-heading">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#basic" role="tab" data-toggle="tab">基础设置</a></li>
                <li role="presentation"><a href="#customer" role="tab" data-toggle="tab">第三方设置</a></li>

            </ul>
        </div>
        <div class="tab-content" style="margin-top:30px;">
        <div role="tabpanel" class="tab-pane fade  active in" id="basic">
            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_blue_top">
                    <p class="qingdong_config_img qingdong_config_blue"><i class="fa fa-wechat"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">小程序</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置小程序</span>
                            <span class="qingdong_config_btn qingdong_config_blue"> <a href="#" class="btn-infos wxprogram" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>

            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_lan_top">
                    <p class="qingdong_config_img qingdong_config_lan"><i class="fa fa-wechat"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">微信公众号</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置微信公众号</span>
                            <span class="qingdong_config_btn qingdong_config_lan"> <a href="#" class="btn-infos weixin" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_201_top">
                    <p class="qingdong_config_img qingdong_config_201"><i class="fa fa-shopping-cart"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">客户端</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置客户端信息</span>
                            <span class="qingdong_config_btn qingdong_config_201"> <a href="#" class="btn-infos users" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>


            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_191_top">
                    <p class="qingdong_config_img qingdong_config_191"><i class="fa fa-address-book"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">公海规则</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">公海规则,客户回收到公海</span>
                            <span class="qingdong_config_btn qingdong_config_191"> <a href="#" class="btn-infos sea" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_red_top">
                    <p class="qingdong_config_img qingdong_config_red"><i class="fa fa-user"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">线索池规则</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置线索池规则</span>
                            <span class="qingdong_config_btn qingdong_config_red"> <a href="#" class="btn-infos leads" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_yellow_top">
                    <p class="qingdong_config_img qingdong_config_yellow"><i class="fa fa-phone"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">手机号查重</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置手机号是否允许重复</span>
                            <span class="qingdong_config_btn qingdong_config_yellow"> <a href="#" class="btn-infos phones" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="customer">

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_red_top">
                    <p class="qingdong_config_img qingdong_config_red"><i class="fa fa-automobile"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">物流</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置聚合数据物流信息</span>
                            <span class="qingdong_config_btn qingdong_config_red"> <a href="#" class="btn-infos logist" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_qlan_top">
                    <p class="qingdong_config_img qingdong_config_qlan"><i class="fa fa-creative-commons"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">百度OCR</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置OCR</span>
                            <span class="qingdong_config_btn qingdong_config_qlan"> <a href="#" class="btn-infos baidu" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_qlan_top">
                    <p class="qingdong_config_img qingdong_config_qlan"><i class="fa fa-creative-commons"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">TextIn名片识别</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置TextIn名片识别</span>
                            <span class="qingdong_config_btn qingdong_config_qlan"> <a href="#" class="btn-infos textin" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_qlans_top">
                    <p class="qingdong_config_img qingdong_config_qlans"><i class="fa fa-group"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">工商信息</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置聚合数据信息</span>
                            <span class="qingdong_config_btn qingdong_config_qlans"> <a href="#" class="btn-infos juhe" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_yellow_top">
                    <p class="qingdong_config_img qingdong_config_yellow"><i class="fa fa-map-marker"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">腾讯地图</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置腾讯地图</span>
                            <span class="qingdong_config_btn qingdong_config_yellow"> <a href="#" class="btn-infos map" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_104_top">
                    <p class="qingdong_config_img qingdong_config_104"><i class="fa fa-envelope"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">163邮箱</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置163邮箱</span>
                            <span class="qingdong_config_btn qingdong_config_104"> <a href="#" class="btn-infos emails" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_blue_top">
                    <p class="qingdong_config_img qingdong_config_blue"><i class="fa fa-wechat"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">企业微信</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置企业微信</span>
                            <span class="qingdong_config_btn qingdong_config_blue"> <a href="#" class="btn-infos wework" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>

            </div>

            <div class="col-sm-4 col-md-3">
                <div class="thumbnail example qingdong_config_lan_top">
                    <p class="qingdong_config_img qingdong_config_lan"><i class="fa fa-wechat"></i></p>
                    <div class="caption">
                        <h4 class="qingdong_config_h">钉钉</h4>
                        <p style="margin-top:20px;">
                            <span class="qingdong_config_txt">配置钉钉</span>
                            <span class="qingdong_config_btn qingdong_config_lan"> <a href="#" class="btn-infos dingding" data-id="141">立即设置</a></span>
                        </p>
                    </div>
                </div>
            </div>

        </div>
        </div>
    </div>

</div>